<template>
  <div class="all">
    <header>
      <div class="div" @click="back">
        <img src="../../assets/返回.png" alt="">
        <span class="side">返回</span>
      </div>
      <div class="div">{{title}}详情</div>
      <div class="div"></div>
    </header>
    <div class="content">
      <ul >
        <li class="hulishiTop">
          <div class="hulishiImg">
            <img v-show="item.SEX === 2" src="../../assets/女医生@2x.png" alt="">
            <img v-show="item.SEX === 1" src="../../assets/男医生@2x.png" alt="">
          </div>
          <div class="hulishiTopRight">
            <p class="name">
              <label>{{item.STAFF_NAME}}</label>
              <button>{{item.GRADE_NAME}}</button>
              <button>从业{{item.YEAR}}年</button>
              <!--              <span><van-icon class="star" name="star" color="#F9D739" /></span>-->
            </p>
            <p class="workTime">
              <span>{{item.MAJOR}}</span>
              <span>{{item.DEPART}}</span>
            </p>
            <p class="workTime" >
              <span v-show="item.HOSPITAL_NAME !== null">{{item.HOSPITAL_NAME}}</span>
              <span class="hospital" v-show="item.HOSPITAL_GRADE_NAME !== null">{{item.HOSPITAL_GRADE_NAME}}</span>
            </p>
          </div>
        </li>
        <li class="hulishiBottom">
          <div class="goodAt">
            <span class="goodAtTitle">【擅长】:</span>
            <span class="goodAtContent"> {{item.Goodat}}
          </span>
          </div>
        </li>
        <li class="hulishiBottom">
          <div class="goodAt">
            <span class="goodAtTitle">【介绍】: </span>
            <span class="goodAtContent">{{item.INTRODUCE}}</span>
          </div>
        </li>
      </ul>
      <div class="menu">
        <span>标签</span>
      </div>
      <div class="muenList" v-show="item.label !== undefined && item.label.length > 0">
        <button class="button" v-for="(item, index) in item.label" :key="index">{{item.LABEL}}</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'NurseDetails',
  data () {
    return {
      item: [],
      title: '',
      staff_id: ''
    }
  },
  mounted () {
    this.title = this.$utils.getUrlKey('title')
    this.staff_id = this.$utils.getUrlKey('staff_id')
    document.title = this.$route.query.title + '详情'
    this.getNurs()
  },
  methods: {
    // 获取护理师详细信息
    getNurs () {
      this.$http.getServerDetail({STAFF_ID: this.staff_id})
        .then(res => {
          console.log(res)
          this.item = res.data
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 返回
    back () {
      this.$router.go(-1)
    }
  }
}
</script>

<style scoped>
  .all{
    width: 100vw;
    height: 100%;
    overflow: scroll;
    background: #FAF9FE;
    font-family: "PingFang SC";
  }
  header {
    width: 100%;
    height: 12vw;
    display: flex;
    align-items: center;
    font-size: 15px;
    font-family: "PingFang SC";
    font-weight: bold;
    border-bottom: 1px solid #E5E5E5;
    background: #FFFFFF;
    position: sticky;
    top: 0;
  }
  .div{
    display: flex;
    align-items: center;
    width: 33%;
  }
  .div:nth-child(2){
  justify-content: center;
  }
  .side{
    color: #1da4f2;
  }
  .div img{
    width: 7px;
    height: 13px;
    margin-left: 15px;
    margin-right: 5px;
  }

   ul{
    width: 100%;
    background: #fff;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row-reverse;
    margin-bottom: 1vw;
     padding: 5px;
     box-sizing: border-box;
  }
   ul li{
    display: flex;
  }
  .hulishiImg{
    width: 20%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    /*margin-right: 8px;*/
  }
  .hulishiImg img{
    width: 60px;
    height: 60px;
    box-sizing: border-box;
    /*margin: 0 10px 0 15px;*/
  }
  .hulishiTop{
    width: 100%;
    height: 75px;
    display: flex;
    margin-bottom: 5px;
  }
  .hulishiTopRight{
    width: 77%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-content: space-around;
  }
  .hulishiBottom {
    width: 100%;
    margin-bottom: 5px;
  }
  .name{
    display: flex;
    align-items: center;
  }
  .name span{
    color: #F9D739;
    display: flex;
    align-items: center;
  }
  .name span .star{
    margin-right: 3px;
  }
  .name label{
    display: block;
    width: 55px;
    font-size: 16px;
    font-weight: bold;
  }
  .name button{
    background: rgba(29, 164, 242, 0.1);
    border-radius: 9px;
    border: none;
    font-size: 12px;
    color: #1DA4F2;
    /*margin: 0 9px 0 15px;*/
    margin: 0 3px 0 10px;
    padding: 3px 8px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .workTime{
    font-size: 13px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #333333;
  }
  .workTime span{
    margin-right: 15px;
  }
  .goodAt {
    color: #333333;
    font-size: 15px;
    width: 98%;
    text-align: left;
    margin: 0 auto;
  }
  .goodAtTitle{
    font-weight: bold;
  }
  .goodAtContent{
    line-height: 1.8;
  }
  .menu{
    width: 100%;
    height: 44px;
    background: #FFFFFF;
    display: flex;
    align-items: center;
    padding: 15px;
    box-sizing: border-box;
  }
  .menu span{
    font-size: 17px;
    font-weight: bold;
    color: #333;
    border-left: 2px solid #1da4f2;
    padding: 5px;
    box-sizing: border-box;
    height: 15px;
    display: flex;
    align-items: center;
  }
  .muenList{
    width: 100%;
    box-sizing: border-box;
    background: #FFFFFF;
    padding: 5px 10px;
    box-sizing: border-box;
  }
  .button{
    /*width: 24%;*/
    font-size: 14px;
    color: #1DA4F2;
    height: 29px;
    border: none;
    border-radius: 5px;
    margin-bottom: 8px;
    background: rgba(29, 164, 242, 0.1);
    margin-right: 5px;
    padding: 0 5px;
    box-sizing: border-box;
  }
  .hospital{
    border: 1px solid;
    width: 29px;
    box-sizing: border-box;
    font-family: PingFang SC;
    font-weight: 500;
    color: #E3170D;
    height: 18px;
    line-height: 18px;
    font-size: 11px !important;
    padding: 1px 3px;
    font-weight: bold;
    border: 1px solid #E3170D;
    border-radius: 4px;
  }
</style>
